<template>
  <div>

    <SkyCardPanel title="加载中">
      <div slot="main" class='containter-form'>

        <sky-button type="primary" @click="loadingbody">加载弹框</sky-button>

      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //加载中
              
               &lt;sky-button type="primary" @click="loadingbody"&gt;加载弹框&lt;/sky-button&gt;
              
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //加载中
              
              export default {
                methods: {
                  loadingbody () {
                    let loading = this.$SkyLoading()
                    setTimeout(() => {
                      loading.close()
                    }, 5000)
                  },
                },
              }
              
          </code>
      </pre>
      </div>

    </SkyHiddenPanel>

    <SkyCardPanel title="加载到指定容器中" id="container">
      <div slot="main" class='containter-form'>

        <sky-button type="primary" @click="loadingcontainer">加载弹框</sky-button>

      </div>
    </SkyCardPanel>

    <SkyHiddenPanel title="代码">

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              //加载中
              
               &lt;sky-button type="primary" @click="loadingcontainer"&gt;加载弹框&lt;/sky-button&gt;
              
          </code>
      </pre>
      </div>

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="javascript">
              //加载中
              
              export default {
                methods: {
                  loadingcontainer () {
                    let loading = this.$SkyLoading({
                      container: '#container'
                    })
                    setTimeout(() => {
                      loading.close()
                    }, 5000)
                  }
                },
              }
              
          </code>
      </pre>
      </div>

    </SkyHiddenPanel>

  </div>
</template>

<script>
  export default {
    methods: {
      loadingbody () {
        let loading = this.$SkyLoading()
        setTimeout(() => {
          loading.close()
        }, 5000)
      },
      loadingcontainer () {
        let loading = this.$SkyLoading({
          container: '#container'
        })
        setTimeout(() => {
          loading.close()
        }, 5000)
      }
    },
  }
</script>

<style>
</style>